<template>
  <h3>基本用法</h3>
  <p>使用 x-menu-item-iteration 迭代器组件，根据 data 子项的 type 渲染菜单。</p>
  <p>
    type 可取值
    x-menu-sub-menu、x-menu-item、x-menu-item-group。这些组件可根据自身业务改造。
  </p>
  <!-- prettier-ignore -->
  <code-demo>
    <x-menu @select="onSelect">
      <x-menu-item-iteration
        v-for="item in data"
        v-bind="item"
        :key="item.index"
      ></x-menu-item-iteration>
    </x-menu>

    <template #code>
      {{ `
<template>
  <x-menu @select="onSelect">
    <x-menu-item-iteration
      v-for="item in data"
      v-bind="item"
      :key="item.index"
    ></x-menu-item-iteration>
  </x-menu>
</template>

<script setup>
// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? \`\${parentId}-\${index}\` : \`\${index}\`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

// 为源数据插入 index
const data = insertIndex([
  {
    type: 'x-menu-sub-menu',
    title: '货架1',
    icon: 'location',
    children: [
      {
        type: 'x-menu-item-group',
        title: '烟酒区',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'x-menu-item-group',
        title: '饮料区',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
    ],
  },
  {
    type: 'x-menu-sub-menu',
    title: '货架2',
    icon: 'location',
    children: [
      {
        type: 'x-menu-sub-menu',
        title: '第一组',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'x-menu-sub-menu',
        title: '第二组',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
    ],
  },
])

// 选择菜单项时触发
function onSelect(index) {
  console.log('selected', index)
}
</script>
      ` }}
    </template>
  </code-demo>
</template>

<script setup>
// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? `${parentId}-${index}` : `${index}`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

// 为源数据插入 index
const data = insertIndex([
  {
    type: 'x-menu-sub-menu',
    title: '货架1',
    icon: 'location',
    children: [
      {
        type: 'x-menu-item-group',
        title: '烟酒区',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'x-menu-item-group',
        title: '饮料区',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
    ],
  },
  {
    type: 'x-menu-sub-menu',
    title: '货架2',
    icon: 'location',
    children: [
      {
        type: 'x-menu-sub-menu',
        title: '第一组',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'x-menu-sub-menu',
        title: '第二组',
        children: [
          { type: 'x-menu-item', title: '第一排' },
          { type: 'x-menu-item', title: '第二排' },
        ],
      },
    ],
  },
])

// 选择菜单项时触发
function onSelect(index) {
  console.log('selected', index)
}
</script>

<style lang="scss" scoped></style>
